<template>
  <div class="miam">
    <!-- 页面 -->
    <router-view></router-view>
    <!-- 底部导航 -->
    <van-tabbar route z-index="99" active-color="#f80">
      <van-tabbar-item replace to="/goods" icon="bag-o"
        ><div @click="goTops">商城</div>
      </van-tabbar-item>
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o" class="shop-card" :badge="badge"
        >购物车</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["goTop", "numList"]),
    //加入购物车的数量
    badge() {
      const count = Object.values(this.numList).reduce((prev, cur) => prev + cur, 0);
      if (count > 99) {
        return "99+";
      }
      return count;
    },
  },
  methods: {
    goTops() {
      if (this.goTop) return;
      this.$store.commit("setGoTop", true);
    },
  },
};
</script>

<style lang="scss" scoped></style>
